<script setup lang="ts">
import { storeToRefs } from 'pinia';

import { addressStore } from '#/store';

const address = addressStore();
const { tableData, seletInListAddersId, activeKey, page } =
  storeToRefs(address);
</script>

<template>
  <div>
    <div v-if="tableData && tableData.length > 0">
      <a-radio-group
        v-model:value="seletInListAddersId"
        class="mb-2 h-72 w-full overflow-y-auto"
      >
        <a-space direction="vertical">
          <a-radio
            v-for="item in tableData"
            :key="item.tbId"
            :value="item.tbId"
          >
            <a-space :size="1" direction="vertical">
              <div>{{ item.receiveName }}, {{ item.receivePhone }}</div>
              <div>
                {{ item.addressDetail }}
              </div>
            </a-space>
          </a-radio>
        </a-space>
      </a-radio-group>
      <a-pagination
        v-model:current="page.page"
        v-model:page-size="page.pageSize"
        :show-total="(_total: any) => `共 ${page.total} 条`"
        :total="page.total"
        size="small"
        style="text-align: right"
        @change="address.handleCurrentChange"
      />
      <!-- <a-pagination v-model="address.page" :total="address.total" /> -->
    </div>
    <div v-else>
      <a-empty
        :image-style="{
          height: '60px',
          display: 'flex',
          justifyContent: 'center',
        }"
        image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
      >
        <template #description>
          <span> 地址库没有东西，前往录入 </span>
        </template>
        <a-space>
          <a-button type="primary" @click="activeKey = '2'">
            前往录入
          </a-button>
          <a-button type="primary" @click="address.getList">
            已经录入刷新
          </a-button>
        </a-space>
      </a-empty>
    </div>
  </div>
</template>
